<script setup lang="ts">
import HeaderNav from '@/components/common/HeaderNav.vue';
</script>

<template>
    <div class="box">
        <HeaderNav />
        <div class="main">
            <div class="content">
                <div class="content-item"></div>
                <div class="content-item"></div>
                <div class="content-item"></div>
                <div class="content-item"></div>
            </div>
            <router-view v-slot="{ Component }">
                <transition name="router_animate">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;

.box {
    height: auto;
    width: 100%;
    margin: 0 0;

    .main {
        // height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #d7d8ce;

        .content {
            position: fixed;
            top: $header-height*2;
            left: $logo-width*2.5;
            bottom: $header-height;
            right: $logo-width*2.5;
            background-color: rgb(53, 80, 53);
            display: flex;
            flex-wrap: wrap;

            .content-item {
                width: $logo-width*10;
                height: $header-height*2;
                background-color: red;
            }
        }
    }
}


.router_animate-enter-active {
    animation: backInDown 1s;
}

.router_animate-leave-active {
    animation: backOutDown 0.6s;
}
</style>
